<script setup lang="ts">
import ButtonGroup from '@/components/EditItems/ButtonGroup.vue'
import { Document, DocumentRemove } from '@element-plus/icons-vue'
import type { VueComType } from '@/types'
import { inject} from 'vue'
import { EditorType, EditorTypeText } from '@/constants'
const props = defineProps<{
  currentStatus: number;
  status: string[];
  isShow: boolean;
  configKey: EditorType;
  editCom: VueComType;
}>();



const updateStatus = inject('updateStatus');


function changeType(pos: number) {
  if (updateStatus) {
    updateStatus(props.configKey, pos)
  } else {
    console.warn('updateStatus is not provided')
  }
}

</script>

<template>
  <div class="size-editor">
    <button-group :title="EditorTypeText[configKey]" :description="status[currentStatus]">
      <el-button-group>
        <el-button
          :class="{
          select: currentStatus === 0,
        }"
          :icon="DocumentRemove"
          @click="changeType(0)"
        >
        </el-button>
        <el-button
          :class="{
          select: currentStatus === 1,
        }"
          :icon="Document"
          @click="changeType(1)"
        >
        </el-button>
      </el-button-group>
    </button-group>
  </div>
</template>

<style scoped lang="scss">

</style>
